<!-- 旅游拼团订单详情 -->
<template>
  <div class="travel_group_details">
    <el-container class="base_details_container">
      <BackTitleView :title="`订单详情-${statusTitle}`" />
      <el-main>
        <div class="base_details_content">
          <div class="content">
            <div class="base_details_title">产品信息</div>
            <div class="base_details_content_second">
              <el-descriptions>
                <el-descriptions-item label="拼团编号：">{{ data.groupItem.groupCode }}</el-descriptions-item>
                <el-descriptions-item label="产品编号：">{{ data.groupItem.travelCode }}</el-descriptions-item>
                <el-descriptions-item label="产品名称：">{{ data.groupItem.travelName }}</el-descriptions-item>
                <el-descriptions-item label="图片：">
                  <el-image :src="data.groupItem.mainPic" class="image"></el-image>
                </el-descriptions-item>
                <el-descriptions-item label="状态：">{{ statusTitle }}</el-descriptions-item>
                <el-descriptions-item label="出行日期：">{{ data.groupItem.travelDate }}</el-descriptions-item>
                <el-descriptions-item label="基地：">{{ data.groupItem.shopName }}</el-descriptions-item>
                <el-descriptions-item label="成团人数：">{{ data.groupItem.expectNum }}</el-descriptions-item>
                <el-descriptions-item label="当前人数：">{{ data.groupItem.currentNum }}</el-descriptions-item>
                <el-descriptions-item label="剩余名额：">{{ data.groupItem.surplusNum }}</el-descriptions-item>
                <el-descriptions-item label="承接人：">{{ data.groupItem.confirmBy }}</el-descriptions-item>
                <el-descriptions-item label="承接时间：">{{ data.groupItem.confirmTime }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div v-if="statusTitle == '已取消'" class="base_details_title">取消原因</div>
            <div v-if="statusTitle == '已取消'" class="base_details_content_second">
              {{ data.groupItem.cancelReason }}
            </div>
            <div class="base_details_title">拼单信息</div>
            <div class="base_details_content_second">
              <el-table :data="data.orderList">
                <el-table-column label="订单编号" prop="orderCode" align="center" />
                <el-table-column label="套餐名称" prop="packageName" align="center" />
                <el-table-column label="参团时间" prop="createTime" align="center" />
              </el-table>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <el-button v-if="statusTitle == '待接团'" @click="acceptOrder" type="primary">二次已确认</el-button>
        <el-button v-if="statusTitle == '拼团中'" @click="cancelOrder">取消订单</el-button>
        <el-button @click="back">关闭</el-button>
      </el-footer>
    </el-container>
    <CancelOrder ref="cancelOrderRef" @cancelOrder="getCancelOrder"></CancelOrder>
  </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import { ref } from "vue";
import { $msg, $box } from "@ui/msg";
import useRoute from "@util/router";
import CancelOrder from "@com/order/CancelOrder.vue";
import api from "@api/order"

const route = useRoute()
const urlQuery = route.query()

const data = ref({
  groupItem: {}, // 产品信息
  orderList: [], // 拼单列表
})

getData()
function getData() {
  api.detail('travelGroup', urlQuery.code, val => {
    data.value = val
    getConfig(val.groupItem.groupStatus)
  })
}

const statusTitle = ref("已完成")
// 1034001 拼团中、1034002 已过期、1034003 待接团、1034004 已接团、1034005 已取消
function getConfig(status) {
  switch (status) {
    case "1034001":
      statusTitle.value = "拼团中"
      break
    case "1034002":
      statusTitle.value = "已过期"
      break
    case "1034003":
      statusTitle.value = "待接团"
      break
    case "1034004":
      statusTitle.value = "已接团"
      break
    case "1034005":
      statusTitle.value = "已取消"
  }
}

function acceptOrder() {
  $box.open("二次已确认", "是否二次已确认？", () => {
    api.confirm('travelGroup', urlQuery.code, () => {
      $msg.succ("二次已确认成功");
      getData()
    }, (msg) => {
      $box.open("二次已确认失败", msg)
    })
  });
}

const cancelOrderRef = ref("");

function cancelOrder() {
  cancelOrderRef.value.show();
}

function getCancelOrder(data) {
  api.cancel({
    type: 'travelGroup',
    code: urlQuery.code,
    // amount: data.amount,
    remark: data.reason
  }, () => {
    $msg.succ("取消成功");
    getData()
  })
}

function back() {
  route.go(-1)
}
</script>

<style lang="scss">
.travel_group_details {
  height: 100%;
  .el-descriptions__cell {
    width: 33%;
  }
  .image {
    height: 40px;
  }
}
</style>